<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-具名插槽用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <tip-box>
        <!-- 2.1：向具名插槽插入数据方式一：slot="slota" 直接向具名插槽中，插入数据  -->
        <div slot="slota">将内容传给具名插槽-a</div>
        <h3>我是插槽 - 默认的内容</h3>
        <!-- 2.2：向具名插槽插入数据方式二：使用template，向具名插槽中插入多条数据 -->
        <!-- 注：template并不会渲染到dom中 -->
        <template slot="slotb">
          <p>向具名插槽中插入第一条内容</p>
          <p>向具名插槽中插入第二条内容</p>
          <p>向具名插槽中插入第n条内容····</p>
        </template>
      </tip-box>
    </div>
    <script>
      Vue.component('tipBox', {
        data: function () {
          return {};
        },
        // 1：slot插槽，如果有 name="slota"，表示有名的插槽，名花有主。
        template: `
          <div>
            <slot name="slota"></slot> 
            <slot></slot>
            <slot name="slotb"></slot>  
          </div>
        `,
      });
      var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
      });
    </script>
  </body>
</html>
